<template>
  <div class="page">
    <div class="container">
      <div class="search-group">
        <el-form
          ref="form"
          class="search-form"
          :model="searchForm"
          label-width="90px"
        >
          <div class="search-box">
            <div class="search-left-box"></div>
            <div class="search-middle-box1">
              <div class="search-middle-line"></div>
            </div>
            <div class="search-right-box1"></div>
          </div>
        </el-form>
      </div>
      <div class="table-container">
        <pub-table
          ref="pubTable"
          :column="columns"
          :data="tableData"
          :loading="tableLoading"
        >
          <template v-slot:option="scope">
            <el-button
              type="success"
              class="btn-row-edit"
              plain
              @click="edit(scope.row)"
            >
              更新
            </el-button>
          </template>
        </pub-table>
        <!-- <pub-pagination
          :total="total"
          v-model:page="searchForm.pageNum"
          v-model:limit="searchForm.pageSize"
          @pagination="getPageData"
        /> -->
      </div>
    </div>
    <pub-dialog
      v-if="editShow"
      title="更新缓存"
      v-model:visible="editShow"
      width="700px"
    >
    <div class="edit-form edit-dialog">
      <!-- <dialog-content :item="selectedItem" @cancel="editShow = false"> -->
      <el-form slot ref="formRef" :model="formdata.form">
        <!--  -->
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item
              label="验证密钥："
              prop="code"
              :rules="$formRules.input"
            >
              <el-input v-model="formdata.form.code" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="form-item-btn-group">
          <el-button class="btn-form-close" @click="editShow = false">
            取消
          </el-button>
          <el-button
            v-loading="btnLoading"
            class="btn-form-save"
            type="primary"
            @click="submit(formRef)"
          >
            更新
          </el-button>
          
        </el-form-item>
      </el-form>
      </div>
      <!-- </dialog-content> -->
    </pub-dialog>
  </div>
</template>

<script>
export default {
  name: 'baseparamene'
}
</script>

<script setup>
import { areasCache, dictsRefresh } from '@/api/system.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  addSysparam,
  editSysparam,
  getSysparamList,
  getSysparamInfo,
  getSysparamCode
} from '@/api/system'
import { ref, reactive, toRefs, onMounted } from 'vue'
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus
} from '@element-plus/icons-vue'

const tableData = ref([
  {
    name: '更新区划缓存',
    requestUrl: areasCache
  },
  {
    name: '更新字典缓存',
    requestUrl: dictsRefresh
  }
])
const currentRequestUrl = ref('')
const formRef = ref({})
const tableLoading = ref(false)
const btnLoading = ref(false)
const editShow = ref(false)
const isAdd = ref(false)
const searchForm = reactive({
  name: '',
  pageSize: 15,
  pageNum: 1
})
const formdata = reactive({
  form: {}
})
const total = ref(0)
const columns = ref([
  /*
   * label:表格对应的列名
   * prop: 列对应的字段名
   * type:1.format:前端format 字典放到/utils/constants.js里面
   *      2.formatDict: 后端字典format 传字典对应的formatCode
   *      3.option 操纵栏
   */
  { label: '更新缓存名称', prop: 'name' },
  { label: '操作', type: 'option' }
])

onMounted(() => {
  // getPageData()
})
const getPageData = () => {
  tableLoading.value = true
  getSysparamList(searchForm).then(res => {
    tableLoading.value = false
    tableData.value = res.data
    total.value = res.total
  })
}

const edit = item => {
  currentRequestUrl.value = item.requestUrl
  isAdd.value = false
  formdata.form.code = ''
  editShow.value = true
}
const submit = formRef => {
  formRef
    .validate(async valid => {
      if (valid) {
        btnLoading.value = true
        const res = await currentRequestUrl.value(formdata.form)
        if (res.succeed) {
          btnLoading.value = false
          ElMessage({
            type: 'success',
            message: '更新成功'
          })
        } else {
          btnLoading.value = false
          ElMessage({
            type: 'error',
            message: res.msg
          })
        }

        editShow.value = false
      }
    })
    .catch(() => {})
}
</script>

<style lang="scss" scoped></style>
